import destructuringObjects from '../../../examples/files/javascript/destructuringObjects.js'
import destructuringArrays from '../../../examples/files/javascript/destructuringArrays.js'
import destructuringFunctionArguments from '../../../examples/files/javascript/destructuringFunctionArguments.js'
import destructuringAdvanced from '../../../examples/files/javascript/destructuringAdvanced.js'

We can use **destructuring** to extract multiple values from an object or array and assign them to variables simultaneously.

---

## Destructuring objects

We can extract multiple values within an object.

<Example title="Destructuring objects" width={0} code={destructuringObjects} />

---

## Destructuring arrays

We can extract multiple values within an array.

<Example title="Destructuring arrays" width={0} code={destructuringArrays} />

---

## Destructuring function arguments

We can destructure object and array parameters directly in the function declaration.

<Example
  title="Destructuring function arguments"
  width={0}
  code={destructuringFunctionArguments}
/>

---

## Advanced destructuring

We can also nest and rename destructured variables and supply default values.

The rest syntax `...` collects remaining values. <Details>Rest is roughly the inverse of spread.</Details>

<Example
  title="Advanced destructuring"
  width={0}
  code={destructuringAdvanced}
/>
